<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //通过构造函数创建的对象的原型共享问题
        //以下写法实现了原型继承，但存在原型共享的问题
        //思考，name,age,id属性分别是添加到了那个对象上，这样写有什么问题？
        //如何给每个Studnent对象添加自有的name属性
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.showName = function(){console.log(this.name);};
        function Student(name,age,id){
            this.name = name;
            this.age = age;
            this.id = id;
        }
        Student.prototype = new Person("Mike",23); //Student.prototype即实例化的Person对象
        // s1->Student.prototype->Person.prototype->Object.prototype->null
        var s1 = new Student("Bill",19,2017001);
        var s2 = new Student("Lucy",21,2017002);
        s1.showName(); //this指向s1

        //测试如下代码，思考为什么，这样的继承有什么弊端，是否浪费内存
        // new Person("Mike",23);浪费用不到
        console.log(s1.name,s1.age,s1.id); //Bill 19 2017001
        console.log(s2.name,s2.age,s2.id); //Lucy 21 2017002
        s1.__proto__.name = "Jack";
        console.log(s2.name);  //Lucy
        s2.__proto__.__proto__.age = 99;
        console.log(s2.age); //21

        console.log(s1); //Student {name: 'Bill', age: 19, id: 2017001}
        console.log(s1.__proto__); //Person {name: 'Jack', age: 23}
        console.log(s1.__proto__.__proto__) //{age: 99, showName: ƒ, constructor: ƒ}
        
        //JS实现继承的形式 一
        function Person(name,age){
            this.name = name;
            this.age = age;
        };
        Person.prototype.showName = function(){console.log(this.name);};
        function Student(name,age,id){
            Person.call(this,name,age); //调用Person方法
            this.id = id;
        }
        Student.prototype.__proto__ = Person.prototype;
        // console.log(Person.prototype.constructor); //Person(name,age)
        // console.log(Student.prototype.constructor); //Student(name,age,id){
        // 没有实例化一个没用的Person对象 但也实现了继承关系
        var s1 = new Student("xxx",22,2017001);
        var s2 = new Student("www",23,2017002);
        s1; //Student {name: 'xxx', age: 22, id: 2017001}
        s1.showName(); //xxx
        var p = new Person("s",1,22);
        p.age; //1

        //JS实现继承的形式 二
        function Person(name,age){
            this.name = name;
            this.age = age;
        };
        Person.prototype.showName = function(){
            console.log(this.name);
        };
        function Student(name,age,id){
            Person.call(this,name,age);
            this.id = id;
        }
        Student.prototype = Object.create(Person.prototype);
        // console.log(Person.prototype.constructor); //Person(name,age)
        // console.log(Student.prototype.constructor); //Person(name,age)
        Student.prototype.constructor = Student; //!!!!!必须指回去
        var s1 = new Student("xxx",22,2017001);
        var s2 = new Student("www",23,2017002);
        
    </script>
</body>
</html>